<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2024-03-10 23:01:55
 * @LastEditors: 陈波
 * @LastEditTime: 2024-05-06 16:02:53
 * @Description: 
 * @FilePath: \graDesign\src\components\BasicDrawer\index.vue
-->
<template>
  <div class="my-drawer">
    <el-drawer
      v-model="drawer"
      title="高级搜索"
      :direction="direction"
      style="position: absolute"
      width="100%"
      :size="size"
      :before-close="handleClose"
    >
      <div class="content">
        <el-form
          ref="ruleFormRef"
          class="demo-ruleForm"
          :model="form"
          :label-width="formData.labelWidth"
          :inline="formData.inline"
          :rules="formData.rules"
          :size="formData.size"
          :label-position="formData.labelPosition"
        >
          <el-form-item
            v-for="(item, index) in formData.formItem"
            :key="index"
            :label="item.label"
            :prop="item.prop"
            style="margin: 15px 0;"
          >
            <!-- 文本框 -->
            <el-input
              v-if="item.type === 'text'"
              v-model="form[item.prop]"
              :disabled="item.isDisabled"
              :placeholder="item.placeholder"
              clearable
            />
            <!-- 级联选择器 -->
            <el-cascader
              v-if="item.type === 'cascader'"
              popper-class="pc-sel-area-cascader workshopCascader"
              v-model="form[item.prop]"
              :options="item.options"
              :props="item.optionProps || propsTree"
              :filterable="item.filterable"
              clearable
            ></el-cascader>
            <!-- 下拉框 -->
            <el-select
              v-if="item.type === 'select'"
              v-model="form[item.prop]"
              :multiple="item.multiple"
              clearable
              :disabled="item.isDisabled"
              :placeholder="item.placeholder"
              :filterable="item.filterable"
              @change="(val) => selectConcreteChange(val, item.label)"
            >
              <el-option
                v-for="val in item.options"
                :key="val[item.selectkey]"
                :label="val[item.selectLabel]"
                :value="val[item.selectvalue]"
                :disabled="item.isDisabled"
                @click.native="selectDataConcreteFun(item.label, val)"
              />
            </el-select>
            <!-- 日期选择器 -->
            <el-date-picker
              v-if="item.type === 'date'"
              v-model="form[item.prop]"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              :picker-options="item.pickerOptions"
              @change="selectConcreteChange(item, item.label)"
            />
            <!-- 时间选择器 -->
            <el-time-picker
              v-if="item.type === 'time'"
              v-model="form[item.prop]"
              placeholder="请选择时间"
              :picker-options="item.pickerOptions"
            />
            <!-- 月份选择器 -->
            <el-date-picker
              v-if="item.type === 'month'"
              type="month"
              v-model="form[item.prop]"
              value-format="YYYY-MM"
              placeholder="请选择月"
              :picker-options="item.pickerOptions"
              @change="selectConcreteChange(item, item.label)"
            />
            <!-- 年份选择器 -->
            <el-date-picker
              v-if="item.type === 'year'"
              type="year"
              v-model="form[item.prop]"
              value-format="YYYY"
              placeholder="请选择年"
              :picker-options="item.pickerOptions"
              @change="selectConcreteChange(item, item.label)"
            />
            <!-- 日期时间选择器 -->
            <el-date-picker
              v-if="item.type === 'dateTime'"
              v-model="form[item.prop]"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择日期时间"
              :picker-options="item.pickerOptions"
            />
            <!-- 日期和时间范围选择器  -->
            <el-date-picker
              v-if="item.type === 'datetimerange'"
              v-model="form[item.prop]"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
            <el-date-picker
              v-if="item.type === 'daterange'"
              v-model="form[item.prop]"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
            />
            <el-date-picker
              v-if="item.type === 'monthrange'"
              v-model="form[item.prop]"
              type="monthrange"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              size="small"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="footBtn">
        <div class="bottom_one" @click="resetForm()">重 置</div>
        <div class="bottom_all" @click="onSubmit(ruleFormRef)">搜 索</div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from "vue";
import type { FormInstance, FormRules } from "element-plus";

// 定义props
interface DrawerProps {
  drawer: boolean;
  direction: "rtl" | "ltr" | "ttb" | "btt";
  size: string;
  formData: any
}
const props = withDefaults(defineProps<DrawerProps>(), {
  drawer: false,
  direction: "rtl",
  size: "28%",
  formData: {}
});

const { drawer } = toRefs(props);

/**
 * defineEmits emit给父组件
 */
interface EmitEvent {
  (e: "handleClose"): void;
  (e: "selectConcreteChange", params: { label: string, data: any }): void;
  (e: "selectDataConcrete", params: { label: string, data: any }): void;
  (e: "resetForm"): void;
  (e: "onSubmit", params: any): void;
}
const emit = defineEmits<EmitEvent>();
const handleClose = () => {
  emit("handleClose");
};

const selectConcreteChange = (val: any, label: any) => {
  // console.log(label,val)
  emit('selectConcreteChange', { label: label, data: val } )
}
const selectDataConcreteFun = (label: any, val: any) => {
  emit('selectDataConcrete', { label: label, data: val } )
}

const propsTree = ref({
  value: "name",
  label: "name",
})
const form = ref({})
const ruleFormRef = ref<FormInstance>();

const resetForm = async () => {
  form.value = {}
  emit("resetForm");
}
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      emit('onSubmit', form.value)
    } else {
      console.log('invalid')
    }
  })
}
</script>

<style scoped lang="scss">
.my-drawer {
  :deep .el-overlay {
    position: absolute;
    background-color: transparent;
  }
  :deep .el-drawer {
    background-color: #eeeeee;
  }
}

.content {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  height: calc(100% - 70px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}

:deep(.el-input__wrapper) {
  position: relative;
  .el-input__inner {
    padding-right: 18px;
  }
  .el-input__suffix {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }
}

:deep(.el-date-editor), :deep(.el-select) {
  width: 100%;
}

.footBtn {
    text-align: center;
    border-top: 1px solid #ccc !important;
    border-top-color: rgb(204, 204, 204);
    padding: 14px;
    border-color: #EDEDED !important;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .bottom_one {
      margin-left: 10px; 
      width: 120px; 
      line-height: 40px; 
      text-align: center; 
      border-radius: 5px;
      border: 1px solid $header-color;
      color: $header-color;
      &:hover {
        background-color: $header-color;
        color: white;
        cursor: pointer;
      }
    }
    .bottom_all {
      margin-left: 10px; 
      width: 200px; 
      line-height: 40px; 
      text-align: center; 
      border-radius: 5px;
      background-color: $header-color;
      color: #fff;
      &:hover {
        opacity: 0.8;
        cursor: pointer;
      }
    }
}
</style>
